
$(function () {
    chaxun();
    shencha();
})


function chaxun() {
var provinceName =document.getElementById("nameSelect").value;
    $.ajax({
        url: "/chaAjax",
        type: "get",
        data:{"provinceName":provinceName},
        dataType: "json",
        success: function (gg) {
            // 基于准备好的dom，初始化echarts实例

           // document.getElementById("areaName").innerHTML=gg.cha;
            console.log(gg)
            var html="";
            for(var i=0;i<gg.cha.length;i++){
                html+="<option value="+gg.cha[i]+">"+gg.cha[i]+"</option>"
            }
            document.getElementById("areaName1").innerHTML=html;

        }
    })
}

function shencha() {

    var areaName = document.getElementById("areaName1").value;
    $.ajax({
        url:"/shenAjax",
        type:"get",
        data:{"areaName":areaName},
        dataType:"json",
        success:function (smg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts_1'));

            var option = {
                backgroundColor: 'rgba(0,0,0,0)',
                tooltip: {
                    trigger: 'item',
                    formatter: "{b}: <br/>{c} ({d}%)"
                },
                color: [ '#20b9cf', '#2089cf', '#205bcf'],
                legend: { //图例组件，颜色和名字
                    x: '70%',
                    y: 'center',
                    orient: 'vertical',
                    itemGap: 12, //图例每项之间的间隔
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: 'rect',
                    data: ['确认', '治愈', '死亡'],
                    textStyle: {
                        color: [],
                        fontStyle: 'normal',
                        fontFamily: '微软雅黑',
                        fontSize: 12,
                    }
                },
                series: [{
                    name: '白酒品牌前三占比',
                    type: 'pie',
                    clockwise: false, //饼图的扇区是否是顺时针排布
                    minAngle: 20, //最小的扇区角度（0 ~ 360）
                    center: ['35%', '50%'], //饼图的中心（圆心）坐标
                    radius: [40, 60], //饼图的半径
                    //  avoidLabelOverlap: true, ////是否启用防止标签重叠
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: 'transparent',
                            borderWidth: 2,
                        },
                    },
                    label: { //标签的位置
                        normal: {
                            show: true,
                            position: 'inside', //标签的位置
                            formatter: "{d}%",
                            textStyle: {
                                color: '#fff',
                            }
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontWeight: 'bold'
                            }
                        }
                    },
                    data: smg.shen
                }, {
                    name: '',
                    type: 'pie',
                    clockwise: false,
                    silent: true,
                    minAngle: 20, //最小的扇区角度（0 ~ 360）
                    center: ['35%', '50%'], //饼图的中心（圆心）坐标
                    radius: [0, 40], //饼图的半径
                    itemStyle: { //图形样式
                        normal: {
                            borderColor: '#1e2239',
                            borderWidth: 1.5,
                            opacity: 0.21,
                        }
                    },
                    label: { //标签的位置
                        normal: {
                            show: false,
                        }
                    },
                    data: smg.shen
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize",function(){
                myChart.resize();
            });

        }
    })

}